<template>
    <div class="fixed overflow-y-auto bg-white h-screen text-gray-700 menu-container transition-all border-r border-slate-100" :style="{ width: menuStore.menuWidth }">
        <!-- 顶部 Logo, 指定高度为 64px, 和右边的 Header 头保持一样高 -->
        <div class="flex items-center h-[64px] px-3 border-b border-slate-100">
            <div v-if="menuStore.menuWidth == '250px'" class="flex items-center gap-2">
                <el-icon class="text-[22px]" style="color: var(--el-color-primary)">
                    <Collection />
                </el-icon>
                <span class="text-gray-900 font-semibold tracking-wide">知识库后台</span>
            </div>
            <div v-else class="flex items-center justify-center w-full">
                <el-icon class="text-[22px]" style="color: var(--el-color-primary)">
                    <Collection />
                </el-icon>
            </div>
        </div>

        <!-- 下方菜单 -->
        <el-menu :default-active="defaultActive" @select="handleSelect" :collapse="isCollapse" :collapse-transition="false">
            <template v-for="(item, index) in menus" :key="index">
                <el-menu-item :index="item.path">
                    <el-icon>
                        <!-- 动态图标 -->
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </template>
      </el-menu>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { useMenuStore } from '@/stores/menu'

// 引入 useMenuStore
const menuStore = useMenuStore()
const router = useRouter()
const route = useRoute()

// 根据路由地址判断哪个菜单被选中
const defaultActive = ref(route.path)
// 是否折叠
const isCollapse = computed(() =>  !(menuStore.menuWidth == '250px'))
const menus = [
    {
        'name': '仪表盘',
        'icon': 'Monitor',
        'path': '/admin/index'
    },
    {
        'name': '文章管理',
        'icon': 'Document',
        'path': '/admin/article/list',
    },
    {
        'name': '分类管理',
        'icon': 'FolderOpened',
        'path': '/admin/category/list',
    },
    {
        'name': '标签管理',
        'icon': 'PriceTag',
        'path': '/admin/tag/list',
    },
        {
        'name': '知识库管理',
        'icon': 'Collection',
        'path': '/admin/wiki/list',
    },
    {
        'name': '评论管理',
        'icon': 'ChatDotSquare',
        'path': '/admin/comment/list',
    },
    {
        'name': '博客设置',
        'icon': 'Setting',
        'path': '/admin/blog/setting',
    },
]

// 菜单选择事件
const handleSelect = (path) => {
    router.push(path)
}
</script>
<style>
.menu-container .el-menu {
    background-color: #ffffff;
    border-right: 0;
}

.menu-container .el-sub-menu__title {
    color: #374151;
}

.menu-container .el-sub-menu__title:hover {
    background-color: #f5f7fa;
}

.menu-container .el-menu-item {
    color: #374151;
}

.menu-container .el-menu-item:hover {
    background-color: #f5f7fa;
    color: #111827;
}

.menu-container .el-menu-item.is-active {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    border-left: 3px solid var(--el-color-primary);
}

.menu-container .el-menu-item.is-active:hover {
    background-color: var(--el-color-primary-light-9);
}
</style>